<template>
  <div class="main clearfix">
    <div class="main_c">
      <div class="member-box">
        <div class="member-info">
          <div class="member-pic"><span class="member-pic-bg"></span><img width="68" height="68" src="https://dimg04.c-ctrip.com/images/Z80p180000013uw9yF21F.jpg" alt="">
            <div class="member-edit" style="display: none;"><a href="javascript:;" rel="noopener referrer"><i class="i-edit"></i><br>编辑资料</a></div>
          </div>
          <div class="member-name"><a href="javascript:;" rel="noopener referrer" class="member-id">尊敬的会员</a></div>
          <div role="presentation" class="member-level">普通会员&gt;</div>
        </div>
        <div class="member-message">
          <div class="message-alert "><a href="javascript:;" rel="noopener referrer" class="home-mail"><i class="i-mail"></i></a></div>
        </div>
      </div>
      <ul class="account-box">
        <li class="account-giftcard">礼品卡<br><a href="javascript:;" rel="noreferrer noopener" class="f-price"><span data-hover="￥0">￥0</span></a><a href="javascript:;" rel="noopener referrer" class="tag-blue">购买</a></li>
        <li class="account-money">现金<br><a href="javascript:;" rel="noreferrer noopener" class="f-price"><span data-hover="￥0">￥0</span></a></li>
        <li class="account-cash">返现<br><a href="javascript:;" rel="noreferrer noopener" class="f-price"><span data-hover="￥0">￥0</span></a></li>
        <li class="account-mileage">积分<br><a href="javascript:;" rel="noreferrer noopener" class="f-price"><span data-hover="0">0</span></a></li>
        <li class="account-coupons">优惠券<br><a href="javascript:;" rel="noreferrer noopener" class="f-price"><span data-hover="0">0</span></a></li>
      </ul>
      <ul class="home-tab">
        <li role="presentation" class="current"><span>全部订单</span></li>
        <li role="presentation"><span>未出行</span></li>
        <li role="presentation"><span>待付款</span></li>
        <li role="presentation"><span>待评价</span></li>
      </ul>
      <ul class="order-list home-order-list">
        <div v-for="(order,index) in orderInfo" :key="order.order_id">
          <li class="order-list_flight" v-if="index<6">
            <div class="order-hd"><i class="order-type type-hotel"></i></div>
            <div class="order-cont">
              <div role="presentation">
                <div class="status-position"><span class="price-box"><span class="order-price f-price"><dfn>¥</dfn>{{order.min_price}}</span></span><span class="order-status-box"><span class="order-status">{{order.pay_status==1?'已支付':'未支付'}}</span></span></div>
                <h2>{{JSON.parse(orderInfo[0].detail_info).name}}</h2>
                <p class="order-info">{{JSON.parse(orderInfo[0].detail_info).address}}</p>
                <p class="order-info">{{JSON.parse(orderInfo[0].detail_info).grade}}</p>
                <p class="order-info">{{order.rooms_name}}</p>
              </div>
            </div>
          </li>
        </div>
      </ul>
      <ul class="home-tab">
        <li class="current" role="presentation"><span>最新收藏</span></li>
      </ul>
      <div class="home-none"><i class="none-product-favorite"></i><span>收藏夹空空的，随便逛逛吧，看看有没有喜欢的~</span></div>
      <ul class="home-tab">
        <li class="current" role="presentation"><span>浏览历史</span></li>
      </ul>
      <div class="home-none"><i class="none-product-favorite"></i><span>足迹空空，随便逛逛吧</span></div>
    </div>
    <div class="main_r">
      <div class="box_widget box_widget_app">
        <div class="box_widget_inner">
          <div class="box_widget_tit">
            <h3>应用中心</h3>
          </div>
          <div class="box_widget_con">
            <ul class="list_apply clearfix">
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_grow"></i>我的特权</a></li>
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_flifo"></i>航班动态</a></li>
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_integral"></i>积分兑换</a></li>
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_rss"></i>邮件订阅</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="box_widget box_widget_bbs">
        <div class="box_widget_inner">
          <div class="box_widget_tit">
            <h3>社区</h3><a href="javascript:;" rel="noopener referrer" class="more">我的社区主页&gt;</a>
          </div>
          <div class="box_widget_con">
            <ul class="list_apply clearfix">
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_guide"></i>当地向导</a></li>
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_faqs"></i>攻略问答</a></li>
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_travels"></i>精选游记</a></li>
              <li><a href="javascript:;" rel="noopener referrer"><i class="ico_apply i_apply_share"></i>分享点评</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="box_widget box_widget_bbs">
        <div class="box_widget_inner">
          <div class="box_widget_con">
            <div><a href="javascript:;" rel="noopener referrer"><img src="//pic.c-ctrip.com/platform/online/my/home/super_enter.jpg" alt="旅行超级会员"></a></div>
          </div>
        </div>
      </div>
      <div class="box_widget box_widget_privilege">
        <div class="box_widget_inner">
          <div class="box_widget_tit">
            <h3>我的会员特权</h3><a href="javascript:;" rel="noopener referrer" class="more">更多&gt;</a>
          </div>
          <div class="box_widget_con">
            <dl><span>
                <dt>积分奖励</dt>
                <dd>预订成交享有积分奖励，会员等级越高，积分累加更多！ 签到、点评、抽奖等都也可获得积分！</dd>
              </span><span>
                <dt>积分兑换丰富礼品</dt>
                <dd>您可以登录旅行客户端的“会员商城”，使用积分进行礼品兑换。</dd>
              </span></dl>
          </div>
        </div>
      </div>
      <div class="box_widget box_widget_member">
        <div class="box_widget_inner">
          <div class="box_widget_tit">
            <h3>会员互动</h3>
          </div>
          <div class="box_widget_con">
            <ul class="clearfix">
              <li><a href="javascript:;" rel="noopener referrer">会员权益平台</a></li>
              <li><a href="javascript:;" rel="noopener referrer">积分兑换专区</a></li>
            </ul>
          </div>
          <div class="divide"></div>
          <div class="box_widget_tit">
            <h3>会员规则</h3>
          </div>
          <div class="box_widget_con">
            <ul class="clearfix">
              <li><a href="javascript:;" rel="noopener referrer">会员升级标准</a></li>
              <li><a href="javascript:;" rel="noopener referrer">旅行积分规则</a></li>
            </ul>
          </div>
        </div>
        <div class="box_widget_inner widget_bind_weixin">
          <h5><em>订单贴心提醒，</em>行程一手掌握！</h5>
          <p><i class="ico_mbwx i_mbwx_richscan"></i>扫一扫关联微信，订单有变动，官方微信为您及时提醒</p><i class="ico_mbwx i_mbwx_mobile"></i><i class="ico_mbwx i_mbwx_qcode"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyHome',
  computed: {
    ...mapState({
      orderInfo: state => {
        return state.order.orderInfo
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  visibility: hidden;
  line-height: 0;
}
.f-price {
  font-family: Tahoma;
  color: #227bef;
  dfn {
    margin-right: 2px;
    font-size: 12px;
    font-family: arial;
    font-weight: 400;
  }
}
.btn01,
.btn02,
.show-more,
.tag-blue,
.tag-level,
.tag-orange {
  display: inline-block;
}
.main {
  padding: 10px 0 10px 8px;
  margin-left: 160px;
  margin-bottom: 10px;
  border: solid #e8e8e8;
  border-width: 0 1px 1px;
  background: #efefef;
  position: relative;
}
.divide {
  width: 100%;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-top: 1px solid #e8e8e8;
}
.member-edit,
.member-reviewed {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 68px;
  height: 63px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-top: 5px;
  border-radius: 50%;
}
.btn01,
.btn02 {
  padding: 0 10px;
  border: 1px solid #b6b6b6;
  font: 12px/22px Microsoft yahei;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 2px;
  outline: 0;
}
.main_c {
  float: left;
  width: 730px;
  padding-right: 0;
  .member-box {
    margin-right: 0;
    height: 104px;
    background: url('../assets/images/bg-member-info.png') no-repeat #4baaec;
    background-size: 100% 100%;
    overflow: hidden;
    .member-info {
      padding: 15px 275px 0 125px;
      color: #fff;
      position: relative;
      .member-pic,
      .member-pic-bg {
        position: absolute;
        width: 78px;
        height: 78px;
      }
      .member-pic {
        top: 12px;
        left: 30px;
        overflow: hidden;
        img {
          border-radius: 50%;
          margin: 5px 0 0 5px;
        }
      }
      .member-pic-bg {
        top: 0;
        left: 0;
        display: inline-block;
        background: url('../assets/images/border-head.png') no-repeat;
        -webkit-animation: rotateIn 1s both 1s;
        animation: rotateIn 1s both 1s;
      }
      .member-edit {
        a {
          color: #fff;
        }
        .i-edit {
          margin: 4px 0 0 10px;
          display: inline-block;
          width: 24px;
          height: 24px;
          background: url('../assets/images/icon-edit.png') no-repeat;
        }
      }
      .member-name {
        margin: 15px 0 5px;
        .member-id {
          display: inline-block;
          max-width: 190px;
          line-height: 24px;
          vertical-align: middle;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 18px;
          cursor: pointer;
          color: #fff;
          -webkit-text-shadow: 2px 2px 2px rgba(17, 119, 191, 0.5);
          -ms-text-shadow: 2px 2px 2px rgba(17, 119, 191, 0.5);
          text-shadow: 2px 2px 2px rgb(17 119 191 / 50%);
        }
      }
      .member-level {
        position: absolute;
        top: 52px;
        left: 95px;
        padding: 5px 30px 0;
        text-align: center;
        font-size: 12px;
        color: #fff;
      }
    }
    .message-alert {
      position: absolute;
      right: -217px;
      top: 20px;
      width: 200px;
      height: 55px;
      padding: 5px 10px 5px 65px;
      background: hsla(0, 0%, 100%, 0.3);
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      color: #001e3b;
      cursor: pointer;
      filter: progid:DXImageTransform.Microsoft.gradient(enabled="true", startColorstr="#4CFFFFFF", endColorstr="#4CFFFFFF");
      filter: none;
      background-color: hsla(0, 0%, 100%, 0.3);
      .home-mail {
        left: 5px;
        width: 44px;
        height: 44px;
        position: absolute;
        top: 10px;
        .i-mail {
          display: inline-block;
          background: url('../assets/images/un_home_member.png') no-repeat;
          vertical-align: middle;
          position: absolute;
          top: 12px;
          left: 10px;
          width: 25px;
          height: 19px;
          background-position: 0 -24px;
        }
      }
    }
  }
  .account-box {
    padding: 5px 10px;
    height: 36px;
    overflow: hidden;
    background: #fff;
    margin-right: 0;
    .f-blue,
    .f-price {
      height: 19px;
      overflow: hidden;
      display: inline-block;
      span {
        position: relative;
        display: inline-block;
        width: 79px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        -webkit-transition: transform 0.3s;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        &:before {
          display: block;
          width: 100%;
          text-align: center;
          position: absolute;
          top: 100%;
          content: attr(data-hover);
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
        }
      }
    }
    .tag-blue,
    .tag-orange {
      padding: 2px 5px;
      font-size: 12px;
      line-height: 1;
      border-radius: 2px;
    }
    li {
      position: relative;
      float: left;
      display: inline;
      margin: 0 0.8%;
      word-wrap: break-word;
      word-break: break-all;
      text-align: center;
      color: #999;
      border-right: 1px solid #efefef;
      &.account-coupons {
        border-right: none;
      }
      a,
      span {
        vertical-align: -2px;
      }
    }
    .account-giftcard,
    .account-money {
      width: 23%;
    }
    .f-price {
      font-family: Tahoma;
      color: #227bef;
    }
    .tag-blue {
      position: absolute;
      right: 10px;
      bottom: 2px;
      color: #3e85e2;
      background: #fff;
      border: 1px solid #dedede;
    }
    .account-cash,
    .account-coupons,
    .account-mileage {
      width: 15%;
    }
  }
  .home-tab {
    line-height: 49px;
    text-align: center;
    font-size: 15px;
    border-bottom: 1px solid #e8e8e8;
    margin-top: 10px;
    background-color: #fff;
    height: 49px;
    li {
      float: left;
      width: 140px;
      height: 49px;
      font-family: microsoft yahei;
    }
    .current {
      height: 47px;
      color: #3e85e2;
      border-bottom: 3px solid #2577e3;
      cursor: default;
    }
  }
  .order-list {
    font-size: 14px;
    font-family: microsoft yahei;
    li {
      margin-bottom: 0;
      border: 0;
      border-top: 1px solid #e8e8e8;
      border-radius: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
      position: relative;
      padding: 15px 20px 15px 60px;
      background: #fff;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .order-hd {
      position: absolute;
      left: 0;
      top: 15px;
      display: inline-block;
      zoom: 1;
      width: 60px;
      text-align: center;
      overflow: hidden;
    }
    .order-type {
      display: inline-block;
      width: 26px;
      height: 26px;
      border-radius: 2px;
      background: url('../assets/images/un_order@20220215.png') no-repeat #78cff3;
    }
    .type-hotel {
      background-position: -1px 4px;
    }
    .order-cont {
      position: relative;
      padding: 0 270px 0 0;
      padding-right: 0;
      .status-position {
        position: absolute;
        text-align: right;
        font-size: 0;
        right: 0;
        top: 2px;
        color: #e7e7e7;
        .order-status-box,
        .price-box {
          display: inline-block;
          font-size: 14px;
          vertical-align: top;
        }
        .price-box {
          border-right: 1px solid #ccc;
        }
      }
      h2 {
        margin-bottom: 6px;
        font: 16px/27px Microsoft yahei, arial, Simsun, sans-serif;
        color: #222;
        width: 70%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .order-info {
        margin-top: 5px;
        font: 14px/1.5 Microsoft yahei, arial, Simsun, sans-serif;
        color: #888;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .order-price {
      display: block;
      word-break: break-all;
      color: #f60;
      margin: 0 10px;
      line-height: 16px;
      dfn {
        font-size: 14px;
      }
    }
    .order-status {
      display: block;
      margin: 0 10px;
      color: #666;
      line-height: 16px;
    }
    li.order-list_flight .order-info {
      padding-right: 130px;
    }
    .order-ft {
      text-align: right;
      &:after {
        clear: both;
      }
      &:after,
      &:before {
        display: table;
        content: '';
        line-height: 0;
      }
      a {
        position: relative;
        margin: 0 10px;
      }
      .btn02 {
        height: 22px;
        border-color: #dedede;
        background-color: #fff;
        color: #3e85e2;
      }
    }
  }
  .home-none {
    height: 190px;
    line-height: 190px;
    text-align: center;
    font-size: 15px;
    background-color: #fff;
    position: relative;
    .none-product-favorite {
      display: inline-block;
      width: 112px;
      height: 108px;
      background: url('../assets/images/un_home_none.png') 0 -110px no-repeat;
      vertical-align: middle;
    }
  }
}
.main_r {
  float: right;
  width: 270px;
  margin-top: 0;
  overflow: hidden;
  padding-right: 0;
  .box_widget_app,
  .box_widget_bbs,
  .box_widget_member,
  .box_widget_privilege {
    width: 100%;
    float: none;
  }
  .box_widget_inner {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 130px;
    background: #fff;
    .box_widget_tit {
      position: relative;
      overflow: hidden;
      h3 {
        padding-left: 10px;
        font: 14px/30px microsoft yahei;
        color: #666;
      }
      .more {
        position: absolute;
        right: 0;
        top: 0;
        line-height: 30px;
        color: #3e85e2;
      }
    }
    .list_apply {
      padding: 20px 0 10px;
      li {
        float: left;
        display: inline-block;
        width: 62px;
        margin-bottom: 10px;
        text-align: center;
        a {
          display: block;
          color: #666;
        }
      }
      .ico_apply {
        display: block;
        margin: 0 auto 7px;
        cursor: pointer;
      }
      .ico_apply {
        width: 36px;
        height: 32px;
        background: url('../assets/images/un_apply_160829.png') no-repeat;
        vertical-align: middle;
        overflow: hidden;
      }
      .i_apply_grow {
        background-position: 0 0;
      }
      .i_apply_flifo {
        width: 38px;
        background-position: 0 -74px;
      }
      .i_apply_integral {
        background-position: -40px -76px;
      }
      .i_apply_rss {
        background-position: -72px 0;
      }
      .i_apply_guide {
        background-position: 0 -32px;
      }
      .i_apply_faqs {
        background-position: -36px -32px;
      }
      .i_apply_travels {
        background-position: -72px -32px;
      }
      .i_apply_share {
        background-position: -108px -32px;
      }
    }
  }
  .box_widget_privilege {
    clear: none;
    .box_widget_inner {
      margin-bottom: 0;
      .box_widget_con {
        margin-top: 10px;
        padding: 0 10px;
      }
      dt {
        font: 700 12px/2 microsoft yahei;
        color: #ff9a14;
      }
      dd {
        margin-bottom: 10px;
        color: #666;
      }
    }
  }
  .box_widget_member {
    position: relative;
    height: auto;
    .box_widget_tit h3 {
      padding: 0;
    }
    .box_widget_inner {
      position: static;
      padding: 10px 20px;
      float: none;
      width: auto;
      border: solid #e8e8e8;
      border-width: 1px 0;
      li {
        float: left;
        width: 47%;
      }
    }
    .box_widget_con {
      padding: 0 0 20px;
    }
    .divide {
      z-index: 1;
      position: absolute;
      left: 15px;
      top: 42%;
      margin: -65px 0 0;
      width: 233px;
      height: 1px;
      border: 0;
      background: #e8e8e8;
    }
    .widget_bind_weixin {
      position: relative;
      height: 174px;
      padding: 12px 20px 14px;
      margin: 0;
      float: none;
      width: auto;
      h5 {
        padding-top: 30px;
        padding-left: 10px;
        font: 18px/24px microsoft yahei;
        color: #1cb9b0;
        em {
          display: block;
          color: #42990e;
        }
      }
      p {
        position: relative;
        z-index: 2;
        padding: 6px 6px 6px 50px;
        margin-top: 24px;
        margin-right: 6px;
        font: 12px/1.5 microsoft yahei;
        color: #333;
        background: #fff;
        background: hsla(0, 0%, 100%, 0.6);
        -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 25%);
        box-shadow: 0 0 10px rgb(0 0 0 / 25%);
        .i_mbwx_richscan {
          position: relative;
          float: left;
          margin-top: 4px;
          margin-left: -41px;
          display: inline-block;
        }
      }
      .ico_mbwx {
        background: url('../assets/images/un_qcode_mbweixin.png') no-repeat;
      }
      .i_mbwx_richscan {
        width: 36px;
        height: 28px;
        background-position: -84px -150px;
      }
      .i_mbwx_mobile {
        position: absolute;
        right: 20px;
        top: 12px;
        width: 84px;
        height: 174px;
        background-position: 0 -84px;
        display: inline-block;
      }
      .i_mbwx_qcode {
        position: absolute;
        right: 28px;
        top: 41px;
        width: 68px;
        height: 66px;
        background-position: -84px -84px;
        display: inline-block;
      }
    }
  }
}
</style>